<template>
	<view>
		<view class="index-upbox">
			<view class="index-up-code" @click="showQRclickEvnet"><image src="../../static/home/conent/二维码%20(1).png" mode=""></image></view>
			<view class="index-up-click" @click="backTopClcikEvent"><image src="../../static/home/conent/上箭头.png" mode=""></image></view>
		</view>
		<!-- 二维码展示 -->
		<view class="item-info-imgup" @click="cloceShowQRclickEvent" v-show="showQR"><image :src="QRcode" mode=""></image></view>
	</view>
</template>

<script>
//引入二维码生成工具
import QR from '../../tools/wxqrcode.js';
export default {
	data() {
		return {
			// 二维码
			QRcode: '',
			showQR: false
		};
	},
	methods: {
		// 关闭
		cloceShowQRclickEvent() {
			this.showQR = false;
		},
		//生成二维码
		showQRclickEvnet() {
			let img = QR.createQrCodeImg(`http://localhost:8080/#/`, {
				size: parseInt(200)
			});
			console.log('点击了');
			this.QRcode = img;
			console.log(img);

			this.showQR = true;
		},
		//回到顶部方法
		backTopClcikEvent() {
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 1
			});
		}
	}
};
</script>

<style lang="scss">
.item-info-imgup {
	width: 100vw;
	height: 100vh;
	background: rgba(0, 0, 0, 0.5);
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000000000000;
	//生成出的图片
	& > image {
		width: 400rpx;
		height: 400rpx;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		display: block;
		position: absolute;
		margin: auto;
	}
}
.index-upbox {
	position: fixed;
	right: 5upx;
	bottom: 100upx;
	width: 170upx;
	text-align: center;
	height: 170upx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	view {
		margin: 0 auto;
		background-color: #ffffff;
		width: 45%;
		height: 45%;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		image {
			width: 70%;
			height: 70%;
		}
	}
}
</style>
